<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@page import="com.vs.model.ExpenseForm"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>Add Expense</title>
<script src="js/1.7.1jquery.min.js"></script>

<link rel="stylesheet" href="css/jquery.ui.base.css" />
<link rel="stylesheet" href="css/jquery.ui.theme.css" />
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="css/demos.css" />
<script>
	$(function() {
		$(".datepicker").datepicker({
			altField : "#alternate",
			altFormat : "DD, d MM, yy"
		});
	});
</script>


<script src="js/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript">
	$(function() {
		$('.slide-out-div').tabSlideOut({
			tabHandle : '.handle', //class of the element that will become your tab
			pathToTabImage : 'images/takeatestdrive.png', //path to the image for the tab //Optionally can be set using css
			imageHeight : '187px', //height of tab image           //Optionally can be set using css
			imageWidth : '31px', //width of tab image            //Optionally can be set using css
			tabLocation : 'right', //side of screen where tab lives, top, right, bottom, or left
			speed : 300, //speed of animation
			action : 'click', //options: 'click' or 'hover', action to trigger animation
			topPos : '400px', //position from the top/ use if tabLocation is left or right
			rightPos : '20px', //position from left/ use if tabLocation is bottom or top
			fixedPosition : true
		//options: true makes it stick(fixed position) on scroll

		});

	});
</script>
<script type="text/javascript" language="javascript">
	$(document).ready(
			function() {
				$('.adCntnr div.acco2:eq(0)').find('div.expand:eq(0)')
						.addClass('openAd').end().find('div.collapse:gt(0)')
						.hide().end().find('div.expand').click(
								function() {
									$(this).toggleClass('openAd').siblings()
											.removeClass('openAd').end().next(
													'div.collapse')
											.slideToggle().siblings(
													'div.collapse:visible')
											.slideUp();
									return false;
								});
			})
</script>

<%
	String projectId = "";
	if (session.getAttribute("projectId") != null) {
		projectId = session.getAttribute("projectId").toString();
		out.println("projectId=" + projectId);
	}

	String option = "";
	String readOnly = "";
	String expenseId = "";
	String expenseTypeId = "";
	String expenseSupplierName = "";
	String expenseDate = "";
	String payMode = "";
	String expenseAmount = "";
	String chqNo = "";
	String chqDate = "";
	String bankName = "";
	String chqComment = "";
	String notes = "";
	if (request.getAttribute("expenseObj") == null) {
		option = "add";
	} else {
		option = "edit";
		readOnly = "true";
		ExpenseForm expenseObj = (ExpenseForm) request
		.getAttribute("expenseObj");
		expenseId = "" + expenseObj.getExpenseId();
		expenseTypeId = "" + expenseObj.getExpenseTypeId();
		expenseSupplierName = expenseObj.getExpenseSupplierName();
		expenseDate = expenseObj.getExpenseDate();
		payMode = expenseObj.getPayMode();
		expenseAmount = expenseObj.getExpenseAmount();
		chqNo = expenseObj.getChqNo();
		chqDate = expenseObj.getChqDate();
		bankName = expenseObj.getBankName();
		chqComment = expenseObj.getChqComment();
		notes = expenseObj.getNotes();
	}
	out.println("option=" + option);
	out.println("expenseTypeId=" + expenseTypeId);
	out.println("expenseSupplierName=" + expenseSupplierName);
	out.println("expenseDate=" + expenseDate);
	out.println("payMode=" + payMode);
	out.println("expenseAmount=" + expenseAmount);
%>


<script>
function payModeChanged(val)
{
	//alert("1");
	//alert("val="+val.value);
	var payMode = val.value;
	if(payMode=="CHQ")
	{
		document.getElementById("chq_r1").style.display="";
		document.getElementById("chq_r2").style.display="";
	}
	else
	{
		document.getElementById("chq_r1").style.display="none";
		document.getElementById("chq_r2").style.display="none";
	}
}

function expenseTypeChanged(val)
{
	//alert("1");
	//alert("val="+val.value);
	var label=val.options[val.selectedIndex].innerHTML;
	//alert("label="+label);
	if(label=="labour")
	{
		document.getElementById("laborLabel").style.display="";
		document.getElementById("laborField").style.display="";
	}
	else
	{
		document.getElementById("laborLabel").style.display="none";
		document.getElementById("laborField").style.display="none";
	}
}

var projectId = "<%=projectId%>
	";
	document.getElementById("chq_r1").value = projectId;

	function goBack() {
		history.go(-1);
	}
</script>
</head>

<body>

	<jsp:useBean id="projectLOV"
		type="java.util.ArrayList<com.vs.model.ProjectForm>" scope="session" />
	<jsp:useBean id="expenseTypes"
		type="java.util.ArrayList<com.vs.model.ExpenseTypeForm>"
		scope="session" />

	<%-- <%@ include file="/include/sessionCheck.jsp"%> --%>
	<%@ include file="/include/header.jsp"%>

	<%@ include file="/include/menu.jsp"%>

	<!--right start-->
	<div class="right_div">
		<span class="head_font">Add Expenses</span>
		<div class="height20"></div>
		<html:errors />
		<html:javascript formName="expenseForm" />
		<html:form action="expense.do" method="post">
			<input type="hidden" name="action" id="action" value="<%=option%>" />
			<input type="hidden" name="expenseId" value="<%=expenseId%>" />
			<div class="grey_box">
				<table border="0" cellspacing="0" cellpadding="5" width="95%">

					<tr>
						<td width="15%">Project Name</td>
						<td width="25%"><html:select property="expenseProjectId"
								styleClass="input_text" value="<%=projectId %>">
								<html:option value="">---Select---</html:option>
								<html:optionsCollection name="projectLOV" value="projectId"
									label="projectName" />
							</html:select>
						</td>

						<td width="15%">Expense Type</td>
						<td width="25%"><html:select property="expenseTypeId"
								onchange="expenseTypeChanged(this)" styleClass="input_text"
								value="<%=expenseTypeId %>">
								<html:option value="">---Select---</html:option>
								<html:optionsCollection name="expenseTypes"
									value="expenseTypeId" label="expenseType" />
							</html:select>
						</td>
					</tr>

					<tr>
						<td width="15%">Supplier Name</td>
						<td width="25%"><html:text property="expenseSupplierName"
								value="<%=expenseSupplierName %>" styleClass="input_text"></html:text>
						</td>
						<td width="15%">Expense Date</td>
						<td width="25%"><html:text property="expenseDate"
								value="<%=expenseDate %>" styleClass="input_text datepicker"></html:text>
						</td>
					</tr>

					<tr>
						<td width="15%">Pay mode</td>
						<td width="25%"><html:select property="payMode"
								value="<%=payMode %>" onchange="payModeChanged(this)"
								styleClass="input_text">
								<html:option value="">---Select---</html:option>
								<html:option value="CSH">Cash</html:option>
								<html:option value="CHQ">Cheque</html:option>
							</html:select>
						</td>
						<td width="15%">Amount</td>
						<td width="25%"><html:text property="expenseAmount"
								value="<%=expenseAmount %>" styleClass="input_text"></html:text>
						</td>
					</tr>

					<tr id="chq_r1" style="display: none">
						<td width="15%">Cheque No</td>
						<td width="25%"><html:text property="chqNo"
								value="<%=chqNo %>" styleClass="input_text"></html:text>
						</td>
						<td width="15%">Cheque Date</td>
						<td width="25%"><html:text property="chqDate"
								value="<%=chqDate %>" styleClass="input_text datepicker"></html:text>
						</td>
					</tr>

					<tr id="chq_r2" style="display: none">
						<td width="15%">Bank Name</td>
						<td width="25%"><html:text property="bankName"
								value="<%=bankName %>" styleClass="input_text"></html:text>
						</td>
						<td width="15%">Comments</td>
						<td width="25%"><html:text property="chqComment"
								value="<%=chqComment %>" styleClass="input_text"></html:text>
						</td>
					</tr>

					<tr>
						<td width="15%">Notes</td>
						<td width="25%"><html:textarea property="notes"
								value="<%=notes %>" styleClass="input_text"></html:textarea>
						</td>
						<td width="15%" id="laborLabel" style="display: none">Labor
							Type</td>
						<td width="25%" id="laborField" style="display: none"><html:select
								property="laborTypeId" styleClass="input_text">
								<html:option value="">---Select---</html:option>
								<logic:present name="laborTypes" scope="session">
									<logic:iterate id="element" name="laborTypes" scope="session">
										<option
											value='<bean:write name="element" property="laborTypeId" /> '>
											<bean:write name="element" property="laborType" />
										</option>
									</logic:iterate>
								</logic:present>
							</html:select>
						</td>
					</tr>
					<tr>
						<td width="15%"></td>
						<td width="25%"><html:submit value="Save" styleClass="btn"></html:submit>&nbsp;
							<input type="button" value="Back" onclick="goBack()" class="btn" />
						</td>
						<td colspan="2">&nbsp;</td>
					</tr>
				</table>

			</div>
		</html:form>
	</div>
	<!--right end-->

	<div class="clear"></div>

	<%@ include file="/include/footer.jsp"%>


	<script type="">

			if(payMode.equals("CHQ"))
			{
		document.getElementById("chq_r1").style.display="";
		document.getElementById("chq_r2").style.display="";
			}

</script>

</body>


</html>
